.banner {
  width: 750px;
  height: 600px;
  @apply box-border relative;
  .bannerImg {
    width: 750px;
    height: 600px;
    @apply box-border absolute left-0 right-0 top-0 bottom-0;
  }
  .bannerContent {
    width: 530px;
    left: 48px;
    bottom: 182px;
    @apply box-border absolute z-10;
    .bannerTitle {
      font-size: 56px;
      text-shadow: 1px 2px 8px #000000;
      @apply text-white font-bold;
    }
    .bannerDesc {
      margin-top: 20px;
      font-size: 28px;
      text-shadow: 1px 2px 8px #000000;
      @apply text-white font-normal;
    }
  }
  .shareBtn {
    padding: 0 16px;
    height: 54px;
    border-radius: 60px 0 0 60px;
    right: 0;
    top: 418px;
    background: #3f7eef;
    @apply absolute z-10 flex flex-row items-center;
    .shareImg {
      width: 32px;
      height: 32px;
      @apply box-border;
    }
    .shareText {
      margin-left: 8px;
      font-size: 28px;
      @apply text-white font-normal;
    }
  }
}
.mainContent {
  width: 750px;
  padding: 24px 0 132px;
  border-radius: 50px 0 0 0;
  margin-top: -88px;
  @apply box-border bg-white relative overflow-hidden;
  .scrollViewWrap {
    width: 750px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 28px;
    padding-right: 28px;
    @apply box-border bg-hex-fff;
  }
  .scrollView {
    width: 100%;
    white-space: nowrap;
    @apply box-border;
    .scrollItem {
      color: #333333;
      font-size: 28px;
      border-radius: 12px;
      background: #f5f5f5;
      padding: 0 32px;
      margin-right: 20px;
      height: 70px;
      @apply font-normal flex flex-row justify-center items-center;
      &.active {
        background: #3f7eef;
        color: #ffffff;
      }
    }
  }
  .columnBlocks {
    padding-top: 24px;
    padding-left: 28px;
    padding-right: 28px;
    @apply box-border;
    .columnBlock {
      border-radius: 20px;
      padding: 36px 28px 24px;
      margin-bottom: 20px;
      @apply box-border;
      &.color1 {
        background: linear-gradient(180deg, #f2f7ffd1 0%, #e8eefa82 100%);
        .columnListItem::after {
          background: #79a9ff;
        }
      }
      &.color2 {
        background: linear-gradient(180deg, #fdf4f4 0%, #fdf7f7 100%);
        .columnListItem::after {
          background: #ff9a9a;
        }
      }
      &.color3 {
        background: linear-gradient(180deg, #e8fbf9 0%, #f2fbf9 100%);
        .columnListItem::after {
          background: #64cfba;
        }
      }
      &.color4 {
        background: linear-gradient(180deg, #fdf6eb 0%, #fef9f2 100%);
        .columnListItem::after {
          background: #f5be66;
        }
      }
      .columnName {
        color: #333333;
        font-size: 36px;
        @apply font-bold;
      }
      .columnList {
        margin-top: 24px;
        @apply box-border flex flex-row flex-wrap justify-between;
        .columnListItem {
          width: 308px;
          height: 118px;
          border-radius: 12px;
          background: #fff;
          box-shadow: 0 12px 8px 0 #8c8c8c0f;
          padding-left: 22px;
          padding-right: 22px;
          margin-bottom: 20px;
          @apply box-border bg-white relative flex flex-row items-center;
          &::after {
            content: " ";
            width: 6px;
            height: 24px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            @apply absolute block box-border;
          }
        }
      }
    }
  }
}
